<template lang="pug">
  .log
    .title 日志
    .list
      ul(v-if="data.length")
        li(v-for="item of data")
          .icon
          .time {{item.time}}
          .mechanism {{item.mechanism}}
          .status(:class="item.status") {{item.desc}}
</template>
<script>
export default {
  data () {
    return {
      data: []
    }
  },
  mounted () {
    this.$axios.get('/data.json').then(res => {
      if (res.status === 200) {
        this.data = res.data.logs
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
.log
  height 218px
  background-color #09153d
  box-shadow 0px 1px 2px 0px rgba(9, 14, 33, 0.75)
  .title
    padding 0 15px
    height 32px
    line-height @height
    background-color #041646
    font-size 14px
  .list
    ul
      li
        display flex
        font-size 14px
        height 40px
        line-height @height
        padding 0 25px
        &:last-child
          .icon
            &:before
              display none
        &:first-of-type
          margin-top 12px
        .icon
          position relative
          width 10px
          height 10px
          border solid 1px #74d0ff
          border-radius 50%
          margin-right 20px
          background  #212842
          margin-top 15px
          &:before
            content ""
            position absolute
            top 10px
            left 3px
            width 1px
            height 22px
            border-right dashed  1px #74d0ff
        .time
          width 140px
          margin-right 35px
        .mechanism
          margin-right 20px
          flex 1
        .status
          flex 1
          &.success
            color #06de8a
          &.fail
            color #fa0404

</style>
